<template>
    <el-container>
        <el-main>
            <template>
                <div style="text-align: center;">
                    <el-transfer
                        style="text-align: left; display: inline-block;"
                        v-model="value4"
                        filterable
                        :titles="['库中模型', '选中模型']"
                        @change="handleChange"
                        :data="data"
                    >
                        <span slot-scope="{ option }">{{ option.key }}. {{ option.label }}</span>
                        <el-button class="transfer-footer" slot="right-footer" size="big" type="primary" @click="handleImport"
                            >发起对比</el-button
                        >
                    </el-transfer>
                </div>
            </template>
        </el-main>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            data: [],
            value4: [],
            tableData: [
                {
                    name: '别墅.rvt',
                    fileId: 2004793133385920,
                    date: '2020-11-27 20:19:21',
                    isSuccess: true
                },
                {
                    name: '别墅（修改）.rvt',
                    fileId: 2004791355001024,
                    date: '2020-11-27 20:26:03',
                    isSuccess: true
                },
                {
                    name: 'rac_basic_sample_project.rvt',
                    fileId: 2003960239220736,
                    date: '2020-11-26 16:04:04',
                    isSuccess: false
                },
                {
                    name: 'BIMFACE示例图纸.dwg',
                    fileId: 2003462145427456,
                    date: '2020-11-25 23:09:52',
                    isSuccess: true
                },
                {
                    name: 'BIMFACE示例图纸.dwg',
                    fileId: 2003462145427456,
                    date: '2020-11-25 23:09:52',
                    isSuccess: true
                }
            ]
        };
    },
    mounted() {
        for (let i = 0; i < this.tableData.length; i++) {
            this.data.push({ key: i + 1, label: this.tableData[i].name });
        }
        // console.log(this.data);
        // this.$axios({
        //     method: 'get',
        //     url: 'http://localhost:8080/user/getStatus'
        // })
        //     .then(res => {
        //         console.log(res.data);
        //         this.tableData = res.data;
        //     })
        //     .catch(err => {
        //         console.log(err);
        //     });
        // // console.log(this.$route.query.id);
    },
    methods: {
        handleImport() {
            let me = this;
            let fileId1, fileId2;
            if (me.value4.length == 2) {
                fileId1 = me.tableData[me.value4[0] - 1].fileId;
                fileId2 = me.tableData[me.value4[1] - 1].fileId;
                console.log(fileId1, fileId2);

                if (me.tableData[me.value4[0] - 1].name.indexOf('.rvt') >= 0 && me.tableData[me.value4[1] - 1].name.indexOf('.rvt') >= 0) {
                    me.$router.push({
                        path: '/model_compare',
                        query: {
                            previousId: fileId1,
                            nowId: fileId2
                        }
                    });
                } else if (
                    me.tableData[me.value4[0] - 1].name.indexOf('.dwg') >= 0 &&
                    me.tableData[me.value4[1] - 1].name.indexOf('.dwg') >= 0
                ) {
                    me.$router.push({
                        path: '/drawing_compare',
                        query: {
                            previousId: fileId1,
                            nowId: fileId2
                        }
                    });
                } else {
                    me.$message({
                        message: '图纸与模型无法发起对比',
                        type: 'error',
                        showClose: true,
                        center: true
                    });
                }
            } else {
                return;
            }
        },
        handleChange(value, direction, movedKeys) {
            let me = this;
            console.log(value, direction, movedKeys);
            if (value.length > 2) {
                for (let i = 0; i < movedKeys.length; i++) {
                    me.value4.pop();
                }
                me.$message({
                    message: '只能选择两个模型哦！',
                    type: 'error',
                    showClose: true,
                    center: true
                });
            }
            if (me.value4.length >= 2) {
                me.data.forEach(item => {
                    if (item.key !== me.value4[0] && item.key !== me.value4[1]) {
                        item.disabled = true;
                    }
                });
            } else {
                me.data.forEach(item => {
                    item.disabled = false;
                });
            }
        }
    }
};
</script>

<style scoped>
.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    height: 83vh;
}
</style>

<style>
.upload-model .el-upload.el-upload--text {
    width: auto;
    background-color: transparent;
    border: none;
    float: left;
    margin-top: 10px;
}
.upload-model .el-upload.el-upload--text button {
    border-radius: 5px;
}
.content {
    padding-right: 0 !important;
}
.el-transfer-panel {
    width: 500px;
    height: 76vh;
}
.el-transfer-panel__body {
    height: 76vh;
}
.el-transfer-panel__list.is-filterable {
    height: 100%;
}
</style>
